<template>
  <div>
    <a-modal
      :visible="visible"
      :maskClosable="false"
      :destroyOnClose="true"
      :keyboard="false"
      :footer="null"
      @cancel="closeModal"
      width="800px"
    >
      <a-carousel arrows ref="carousel">
        <div
          slot="prevArrow"
          slot-scope="props"
          class="custom-slick-arrow"
          style="left: 10px"
        >
          <a-icon type="left-circle" />
        </div>
        <div
          slot="nextArrow"
          slot-scope="props"
          class="custom-slick-arrow"
          style="right: 10px"
        >
          <a-icon type="right-circle" />
        </div>
        <div
          class="imgbox"
          v-for="(item, index) in imgList"
          :key="index"
          :style="{ background: `url(${item}) no-repeat 50% 50% /contain` }"
          @click="preview(item)"
        ></div>
      </a-carousel>
    </a-modal>
  </div>
</template>
<script>
export default {
  props: {
    imgList: {
      type: Array,
      default: () => [],
    },
    imgIndex: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      visible: false,
    };
  },
  watch: {
    visible(n) {
      this.$nextTick(() => {
        this.$refs.carousel.goTo(this.imgIndex, true);
      });
    },
  },
  methods: {
    preview(item) {
      window.open(item);
    },
    closeModal() {
      // this.$emit("cancel");
      this.visible = false;
    },
  },
};
</script>
<style lang="less" scoped>
.ant-carousel /deep/ .slick-slide {
  text-align: center;
  height: 550px;
  line-height: 160px;
  //   background: #364d79;
  background: #f6f6f6;
  overflow: hidden;
}

.ant-carousel /deep/ .custom-slick-arrow {
  width: 25px;
  height: 25px;
  font-size: 25px;
  //   color: #fff;
  color: #000;
  //   background-color: rgba(31, 45, 61, 0.11);
  opacity: 0.8;
}
.ant-carousel /deep/ .custom-slick-arrow:before {
  display: none;
}
.ant-carousel /deep/ .custom-slick-arrow:hover {
  opacity: 0.5;
}

/deep/.custom-slick-arrow {
  z-index: 1;
}
.imgbox {
  height: 550px;
}
</style>
